<template>
  <div class="login" v-if="$store.state.isActive">
    <div class="phone_login">
      <div class="wrapper">
        <h2 class="signClass">手机号登录</h2>
        <div class="tips">登录成功后，30天内无需验证，自动登录</div>
        <div class="search_list">
          <span class="search_text">手机号：</span>
          <input v-model="phone" maxlength="11" placeholder="请输入手机号" @blur="phoneBlur">
        </div>
        <div class="search_list code">
          <span class="search_text">验证码：</span>
          <input v-model="verificationCode" placeholder="验证码" maxlength="6">
          <button v-if="sendAuthCode==true" class="button" @click="gain">获取验证码</button>
          <button v-else disabled class="button">{{ auth_time }}秒重新获取</button>
        </div>
        <span class="hint">{{ error }}</span>
        <div class="search_list">
          <button class="signIn" @click="signIn">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//请求方法
import {api, httpGet, httpPost} from '../api/http.js'
//Base64
let Base64 = require('js-base64').Base64;

export default {
  name: "login",
  data() {
    return {
      //手机号
      phone: '',
      error: '',
      /*验证码*/
      sendAuthCode: true,
      verificationCode: '',
      auth_time: 0,
      //参数
      obj: '',
    }
  },
  mounted() {
    this.$store.state.isActive = false
    this.Open()
  },
  methods: {
    Open() {
      if (this.$route.path == '/404') {
        this.$store.state.isActive = false
      } else {
        if (window.location.href.split('?')[1]) {
          this.obj = JSON.parse(Base64.decode(decodeURIComponent(window.location.href.split('?')[1])))
          this.isLogin()
        } else {
          this.$router.push('/404')
        }
      }
    },
    //是否登录
    isLogin() {
      httpGet(api.phone).then((res) => {
        if (res.data.code == 200) {
          this.$store.state.isActive = false
        }
        if (res.data.code == 50003) {
          this.$store.state.isActive = true
        }
      })
    },
    /*手机号*/
    phoneBlur() {
      if (this.phone == '') {
        this.error = '请输入手机号';
      } else if (/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(this.phone) && this.phone.length == 11) {
        this.error = '';
      } else {
        this.error = '请输入正确的手机号';
      }
    },
    /*验证码*/
    gain() {
      if (this.phone.length == 11) {
        this.sendAuthCode = false;
        this.auth_time = 60;
        let auth_timetimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            clearInterval(auth_timetimer);
          }
        }, 1000);
        let obj = {
          phone: this.phone,
          wechatOpendId: this.obj.openId,
          code: ''
        }
        httpPost(api.getPhoneCode, obj,).then((res) => {
          if (res.code === 200) {
            console.log(res)
            if (res.data == false) {
              this.error = '系统错误！'
            } else {
              this.error = ''
            }
          }
        })
      } else {
        this.phoneBlur()
      }
    },
    //登录
    signIn() {
      if (this.phone.length != 11) {
        this.phoneBlur()
      } else {
        this.error = '';
        if (this.verificationCode != '') {
          let obj = {
            phone: this.phone,
            code: this.verificationCode,
            wechatOpendId: this.obj.openId,
          }
          httpPost(api.verifyPhoneCode, obj,).then((res) => {
            if (res.data.code == 200) {
              this.$store.state.isActive = false
              this.$router.go(0);
            } else {
              this.error = res.data.description
            }
          })
        } else {
          this.error = '请输入验证码！'
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>

.login {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 2009;
  background: rgba(0, 0, 0, 0.5);
}

.phone_login {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 500px;
  background: #fff;

  .wrapper {
    margin: 0 auto;
    width: 750px;
  }

  .signClass, .tips {
    text-align: center;
  }

  .tips {
    font-size: 24px;
    color: #6D8FD3;
  }

  .search_list {
    text-align: center;
    align-items: center;
    margin: 30px 0;

    .search_text {
      font-size: 28px;
      font-weight: 400;
    }

    input {
      font-weight: inherit;
      font-style: inherit;
      color: inherit;
      border: none;
      border-bottom: 2px rgb(242, 242, 242) solid;
      border-radius: inherit;
      outline: none;
      background: inherit;
      line-height: inherit;
      resize: none;
      text-align: left;
      width: 500px;
      height: 40px;
      font-size: 26px;
    }

    input::-webkit-input-placeholder {
      font-size: 26px;
      color: #888;
    }

    button {
      border: none;
      color: rgb(66, 66, 66);
      border-radius: 6px;
      text-align: center;
      font-weight: normal;
      font-style: normal;
      padding: 10px 20px;
    }

    .button {
      background-color: #fff;
      color: #6D8FD3;
      position: relative;
      left: 230px;
      top: -60px;
    }

    .signIn {
      background-color: rgb(31, 201, 113);
      color: rgb(255, 255, 255);
      width: 560px;
      height: 80px;
    }
  }

  .code {
    height: 46px;
  }

  .hint {
    color: red;
    display: block;
    text-align: center;
    font-size: 18px;
    height: 20px;
  }
}
</style>
